<template>
  <div class="page">
    <Card title="作业计划统计">
      <textNum :data="zysl"></textNum>
    </Card>
    <Card title="作业票统计">
      <div style="position: relative">
        <div class="select">
          <div class="selected">
            <div class="title">{{ selectNode.name }}</div>
            <div @click="clickSelect" class="icon">
              <img src="../assets/selected.svg" alt="" />
            </div>
          </div>
          <div v-if="showList" class="select-list">
            <div
              @click="clickNode(item)"
              v-for="item in selectList"
              class="list-item"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
        <PieVue ref="pieChart"> </PieVue>
      </div>
    </Card>
    <Table
      ref="zytable"
      title="作业活动"
      :headers="['作业票号', '作业区域', '作业内容']"
      :propsData="['billNumber', 'local', 'jobContent']"
      :limitScrollNum="7"
      @rowCilck="rowClick"
      height="250"
    >
      <template #jobType="{ row }"> {{ zypTypes[row.jobType] }}</template>
    </Table>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import { zysl, zyslbt, zyList, send } from "@/api/threeD.js";
import Table from "../components/table.vue";
import Card from "../components/Card.vue";
import PieVue from "../echarts/zyPie.vue";
import textNum from "../echarts/textNum.vue";

// import {
//   RiskPoint,
//   HazardSource,
//   RiskStatistics,
// } from "../components/index.js";
const zypTypes = [
  {
    name: "吊装安全作业票",
    type: "1",
    keyWord: "吊装",
  },
  {
    name: "动火安全作业票",
    type: "2",
    keyWord: "动火",
  },
  {
    name: "高处安全作业票",
    type: "3",
    keyWord: "高处",
  },
  {
    name: "动土安全作业票",
    type: "4",
    keyWord: "动土",
  },
  {
    name: "临时用电作业票",
    type: "5",
    keyWord: "用电",
  },
  {
    name: "动用射线安全作业票",
    type: "6",
    keyWord: "射线",
  },
  {
    name: "断路安全作业票",
    type: "7",
    keyWord: "断路",
  },
  {
    name: "盲板抽堵安全作业票",
    type: "8",
    keyWord: "盲板",
  },
  {
    name: "设备开孔安全作业票",
    type: "9",
    keyWord: "设备",
  },
  {
    name: "受限空间安全作业票",
    type: "10",
    keyWord: "受限空间",
  },
];

export default defineComponent({
  name: "LeftMenu",
  components: {
    // HazardSource,
    // RiskPoint,
    // RiskStatistics,
    Table,
    Card,
    PieVue,
    textNum,
  },
  data() {
    return {
      height: 300,
      zypTypes: {
        1: "吊装作业",
        2: "动火作业",
        3: "高处作业",
        4: "动土作业",
        5: "临时用电作业",
        6: "动用射线作业",
        7: "断路作业",
        8: "盲板抽堵作业",
        9: "设备开孔作业",
        10: "受限空间作业",
      },
      selectList: [
        { name: "全部", value: 0 },
        { name: "今日", value: 1 },
        { name: "本周", value: 2 },
        { name: "本月", value: 3 },
      ],
      selectNode: { name: "全部", value: 0 },
      showList: false,
      zysl: [],
    };
  },
  methods: {
    initZypBt() {
      zyslbt({
        tempType: this.selectNode.value,
      }).then((res) => {
        let total = 0;
        res.data.forEach((item) => (total += item.count));
        if (total == 0) {
          return this.$refs.pieChart.setData({
            total: 0,
            data: Object.keys(this.zypTypes).map((item) => ({
              name: this.zypTypes[item],
              value: 0,
            })),
            center: "特殊作业总数",
            color: [
              "#E462A1",
              "#A394FF",
              "#2EA7FF",
              "#27CBFF",
              "#10F3E5",
              "#10F3A7",
              "#C2E536",
              "#FFCB41",
              "#FF8C21",
              "#FF5F55",
            ],
          });
        }
        this.$refs.pieChart.setData({
          total,
          data: res.data.map((item) => ({
            name: this.zypTypes[item.jobType],
            value: item.count,
          })),
          center: "特殊作业总数",
          color: [
            "#E462A1",
            "#A394FF",
            "#2EA7FF",
            "#27CBFF",
            "#10F3E5",
            "#10F3A7",
            "#C2E536",
            "#FFCB41",
            "#FF8C21",
            "#FF5F55",
          ],
        });
      });
    },
    clickSelect() {
      this.showList = !this.showList;
    },
    clickNode(item) {
      this.selectNode = item;
      this.showList = false;
      this.initZypBt();
    },
    rowClick(row) {
      console.log(row);
      send({
        id: "connect",
        message: JSON.stringify({
          code: "job",
          data: row,
        }),
      });
    },
  },
  mounted() {
    zysl({ tempType: 1 }).then((res) => {
      this.zysl = res.data.map((item) => ({
        name: item.name == "日" ? "今日作业数量" : "本月作业数量",
        count: item.count,
      }));
    });
    this.initZypBt();
    zyList().then((res) => {
      this.$refs.zytable.setData(res.rows);
    });
  },
});
</script>

<style lang="scss" scoped>
.left-menu {
  position: relative;
  width: 360px;
  height: 800px;
  color: #fff;

  &-close {
    position: absolute;
    top: 13px;
    right: 7px;
    z-index: 9;
    transform: rotate(-17deg);
    cursor: pointer;
  }
}

.page {
  padding-top: 15px;
  background-image: url("../assets/pagebg.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
  width: 418px;
  height: 934px;
  backdrop-filter: blur(10px);
  color: #fff;

  overflow: hidden;
}

.select {
  position: absolute;
  right: 0;
  z-index: 999;
  .select-list {
    position: absolute;
    // display: none;
    width: 40px;
    z-index: 999;
    max-height: 100px;
    overflow: auto;
    cursor: pointer;
    top: 25px;
    // left: 30px;
    color: #fff;
    text-align: left;

    .list-item {
      &:hover {
        color: #31effb;
        text-align: left;
      }
    }
  }
  .selected {
    color: #31effb;
    display: flex;
    height: 30px;
    img {
      width: 15px;
    }
    .title {
      padding-top: 4px;
    }
    .icon {
      padding-top: 4px;

      width: 30px;
      text-align: center;
      line-height: 21px;
      cursor: pointer;
    }

    .button {
      border: 0.830211px solid #57d7ff;

      border-radius: 4px;
      padding: 3px 5px;
      margin-left: 5px;
      box-sizing: border-box;
      cursor: pointer;
    }
  }
}
</style>
